<template>
	<div class="payment-page">
		<!-- 地址选择 -->
		<div class="address-section" @click="chooseAddress">
			<img src="https://shalong.taiyanyue.top/images/riLine-map-pin-line1.png" class="address-icon" />
			<div class="address-text">
				<span
					v-if="xuanzong.province_name">{{ xuanzong.province_name }}{{ xuanzong.city_name }}{{ xuanzong.area_name }}{{ xuanzong.street_address }}</span>
				<span v-else>请选择收货地址</span>
			</div>
			<!-- <img src="https://shalong.taiyanyue.top/images/arrow-right.png" class="arrow-icon" /> -->
		</div>

		<!-- 商品清单 -->
		<div class="product-section">
			<div class="section-title">商品清单</div>
			<div class="product-list">
				<div class="product-item" v-for="(item, index) in orderData.goods_order_list" :key="index">
					<img :src="item.goods_cover_path" class="product-image" />
					<div class="product-info">
						<div class="product-name">{{ item.goods_name }}</div>
						<div class="product-price">¥{{ item.goods_price }}</div>
					</div>
					<div class="product-quantity">x{{ item.purchase_quantity }}</div>
				</div>
			</div>

			<!-- 小计 -->
			<div class="subtotal">
				<div>小计{{ orderData.goods_order_count }}件</div>
				<div class="subtotal-price">应付：<text
						style="color: #369a68;font-size: 20px;">¥{{ orderData.total_price }}</text>
				</div>
			</div>
		</div>

		<!-- 备注 -->
		<div class="remark-section">
			<div class="section-title">备注</div>
			<input type="text" style="border: none;" placeholder="如需备注请输入" v-model="remark" />
		</div>

		<!-- 支付方式 -->
		<div class="payment-method">
			<div class="section-title">支付方式</div>
			<div class="method-item" @click="selectPayment('wechat')">
				<img src="https://shalong.taiyanyue.top/images/st-weixinzhifu1.png" class="payment-icon" />
				<div class="method-name">微信支付</div>
				<img v-if="paymentMethod === 'wechat'"
					src="https://shalong.taiyanyue.top/images/fa5-check-circle-fas1.png" class="selected-icon" />
				<img v-else src="https://shalong.taiyanyue.top/images/weixuanz.png" class="unselected-icon" />
			</div>
		</div>

		<!-- 底部支付栏 -->
		<div class="footer-bar">
			<div class="total-amount">
				<span>待支付</span>
				<span class="amount">¥{{ orderData.total_price }}</span>
			</div>
			<button class="pay-button" @click="pay">支付</button>
		</div>




		<!-- 地址弹窗 -->
		<uni-popup ref="dzaddressPopup" type="bottom">
			<div class="popup-content">
				<div class="popup-header">
					<span>收货地址</span>
					<div style="font-size: 25px;" class="close-icon" @click="dizclosePopup">×</div>
				</div>
				<!-- 地址列表 -->
				<div class="address-list" style="height: 50vh;overflow-y: auto;">
					<div class="address-card" v-for="(item, index) in addressList" :key="index">
						<div class="card-header">
							<span class="recipient_name">{{ item.recipient_name }}</span>
							<span
								class="phone_number">{{ item.phone_number.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</span>
							<span class="default-tag" v-if="item.is_default==1">默认</span>
						</div>

						<div class="address-detail">
							{{ item.province_name }}{{ item.city_name }}{{ item.area_name }}{{ item.street_address }}
						</div>

						<div class="card-footer">
							<div class="action-btn" @click="setDefault(index)" :class="{ active: item.gender==1 }">
								<img v-if="item.gender==1"
									src="https://shalong.taiyanyue.top/images/fa5-check-circle-fas1.png"
									class="action-icon" />
								<img v-else src="https://shalong.taiyanyue.top/images/weixuanz.png"
									class="action-icon" />
								选择
							</div>

							<div class="action-group">
								<div class="action-btn" @click="copyAddress(item)">
									复制
								</div>
								<div class="action-btn" @click="editAddress(index)">
									修改
								</div>
								<div class="action-btn" style="color: red;" @click="deleteAddress(index)">
									删除
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 添加地址按钮 -->
				<div
					style="display: flex;justify-content: space-between;align-items: center;padding:10px 12px 10px 12px;">
					<div class="add-btn" style="width: 50%;margin-right: 20px;" @click="showAddressForm">
						+ 新增收货地址
					</div>
					<div class="save-btn" style="width: 50%;" @click="qrdsa()">
						确认
					</div>
				</div>
			</div>
		</uni-popup>

		<!-- 地址表单弹窗 -->
		<uni-popup ref="addressPopup" type="bottom">
			<div class="popup-content">
				<div class="popup-header">
					<span>{{ formTitle }}</span>
					<div style="font-size: 25px;" class="close-icon" @click="closePopup">×</div>
				</div>

				<div class="form-container">
					<div class="form-item">
						<div class="form-label">收货人</div>
						<input v-model="addressForm.recipient_name" placeholder="请输入收货人姓名" class="form-input"
							maxlength="20" />
					</div>

					<!-- <div class="form-item">
						<div class="form-label">性别</div>
						<radio-group class="radio-group" @change="handleGenderChange">
							<label class="radio-label">
								<radio value="先生" :checked="addressForm.gender === '先生'" color="#339966" /> 先生
							</label>
							<label class="radio-label" style="margin-left: 20px;">
								<radio value="女士" :checked="addressForm.gender === '女士'" color="#339966" /> 女士
							</label>
						</radio-group>
					</div -->

					<div class="form-item">
						<div class="form-label">手机号码</div>
						<input v-model="addressForm.phone_number" type="number" placeholder="请输入手机号码" class="form-input"
							maxlength="11" @blur="validatePhone" />
						<div class="error-tip" v-if="phoneError">{{ phoneError }}</div>
					</div>

					<div class="form-item">
						<div class="form-label">所在地区</div>
						<div class="form-input" @click="showRegionPicker">
							{{ addressForm.regionText || '请选择省/市/区' }}
						</div>
					</div>

					<div class="form-item">
						<div class="form-label">详细地址</div>
						<textarea v-model="addressForm.street_address" placeholder="街道、楼牌号等" class="form-textarea"
							maxlength="100" />
					</div>
				</div>

				<div class="save-btn" @click="saveAddress">
					保存地址
				</div>
			</div>
		</uni-popup>

		<!-- 地区选择器 -->
		<uni-popup ref="regionPopup" type="bottom">
			<div class="region-picker">
				<div class="picker-header">
					<span @click="cancelRegionSelect">取消</span>
					<span class="picker-title">选择地区</span>
					<span @click="confirmRegionSelect">确定</span>
				</div>
				<picker-view :value="regionValue" @change="handleRegionChange" class="picker-view">
					<picker-view-column>
						<view v-for="(item, index) in provinces" :key="item.district_id">{{ item.district_name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item, index) in cities" :key="item.district_id">{{ item.district_name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item, index) in areas" :key="item.district_id">{{ item.district_name }}</view>
					</picker-view-column>
				</picker-view>
			</div>
		</uni-popup>


	</div>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	import {
		user_getUserAddressList,
		user_addAddress,
		user_updateAddress,
		user_deleteAddress,
		common_getAreaList,
		order_goodsOrderInfoCreate,
		payment
	} from '@/api/system/user.js'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				selectedAddress: '', // 选择的地址
				remark: '', // 备注信息
				paymentMethod: 'wechat', // 支付方式
				xuanzong: {},
				cartItems: [{
						image: 'https://shalong.taiyanyue.top/images/product-placeholder.png', // 替换为实际商品图片
						name: '25年年刊 | 现货直发',
						price: 69.00,
						quantity: 1
					},
					{
						image: 'https://shalong.taiyanyue.top/images/product-placeholder.png', // 替换为实际商品图片
						name: '25年年刊 | 现货直发',
						price: 11499.00,
						quantity: 2
					}
				],
				addressList: [],
				addressForm: {
					user_address_id: null,
					recipient_name: '',
					phone_number: '',
					// gender: '先生',
					province_id: null,
					city_id: null,
					area_id: null,
					province_name: '',
					city_name: '',
					area_name: '',
					street_address: '',
					is_default: 0,
					region: [],
					regionText: ''
				},
				phoneError: '',
				editIndex: -1,
				formTitle: '新增收货地址',

				// 地区选择器数据
				provinces: [],
				cities: [],
				areas: [],
				regionValue: [0, 0, 0],
				selectedRegion: [],
				orderData: {},
				order_sn: ""
			}
		},
		onLoad(options) {
			if (options.data) {
				const receivedData = JSON.parse(decodeURIComponent(options.data));
				console.log('接收到的数据:', receivedData);
				// 将数据保存到页面的 data 中
				this.orderData = receivedData.data;
				this.order_sn = receivedData.order_sn
			}
		},
		created() {
			this.getUserAddressList();
			this.getProvinces();
		},
		computed: {},
		methods: {
			qrdsa() {
				for (let i = 0; i < this.addressList.length; i++) {
					if (this.addressList[i].gender == true) {
						this.xuanzong = this.addressList[i];
					}
				}
				this.$refs.dzaddressPopup.close();
			},
			// 获取地址列表
			async getUserAddressList() {
				try {
					const res = await user_getUserAddressList({
						page: 1,
						size: 100
					});
					if (res.content.count == 0) {
						this.addressList = [];
						return
					}
					const newItems = res.content.data.map(item => ({
						...item,
						gender: false
					}));
					for (let i = 0; i < newItems.length; i++) {
						if (newItems[i].is_default == 1) {
							this.xuanzong = newItems[i];
							newItems[i].gender = true
						}
					}
					this.addressList = newItems;

				} catch (error) {
					console.error('获取地址列表失败:', error);
					uni.showToast({
						title: '获取地址列表失败',
						icon: 'none'
					});
				}
			},
			// 获取省份列表
			async getProvinces() {
				try {
					const res = await common_getAreaList({
						parent_id: 0
					});
					this.provinces = res.content.data || [];
					if (this.provinces.length > 0) {
						this.getCities(this.provinces[0].district_id);
					}
				} catch (error) {
					console.error('获取省份列表失败:', error);
				}
			},
			// 选择支付方式
			selectPayment(method) {
				this.paymentMethod = method
			},
			// 支付
			async pay() {
				if (!this.xuanzong.user_address_id) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
					return
				}
				if (!this.paymentMethod) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '支付中...',
					mask: true
				});
				try{
					let list = []
					for (let i = 0; i < this.orderData.goods_order_list.length; i++) {
						list.push({
							goods_id: this.orderData.goods_order_list[i].goods_id,
							purchase_quantity: this.orderData.goods_order_list[i].purchase_quantity
						})
					}
					let a = {
						user_address_id: this.xuanzong.user_address_id,
						goods_arr: list,
						order_remark: this.remark
					}
					const data = await order_goodsOrderInfoCreate(a)
					if (data.code == 200) {
						const ddbh = data.content.data.order_sn; // 假设后端返回了支付参数
						payment({
							order_sn: ddbh,
							order_type:2
						}).then(res => {
							// 调用微信支付API
							console.log(res,'1111')
							const paymentData = res.content.data.data;
							this.requestPayment(paymentData);
						}).catch(res=>{
							uni.hideLoading();
							console.error('支付失败:');
							uni.showToast({
							    title: '支付失败，请重试',
							    icon: 'none',
							    duration: 2000
							});
						})
					} else {
					    uni.hideLoading();
					    uni.showToast({
					        title: res.msg || '订单创建失败',
					        icon: 'none',
					        duration: 2000
					    });
					}
				}catch (error) {
			        uni.hideLoading();
			        console.error('支付失败:', error);
			        uni.showToast({
			            title: '支付失败，请重试',
			            icon: 'none',
			            duration: 2000
			        });
			    }
			},
			requestPayment(paymentData) {
				console.log(paymentData,'222222')
			    return new Promise((resolve, reject) => {
			        uni.requestPayment({
			            provider: 'wxpay', // 微信支付
						appid:paymentData.appId,
			            timeStamp: paymentData.timeStamp, // 支付签名时间戳
			            nonceStr: paymentData.nonceStr, // 支付签名随机串
			            package: paymentData.package, // 统一下单接口返回的 prepay_id 格式如：prepay_id=***
			            signType: paymentData.signType || 'MD5', // 签名算法
			            paySign: paymentData.paySign, // 支付签名
			            success: (res) => {
			                // 支付成功处理
			                uni.hideLoading();
			                uni.showToast({
			                	title: '支付成功',
			                	icon: 'success',
			                	duration: 1500
			                });
			                				
			                // 跳转到支付成功页面或订单详情页
			                uni.navigateBack({
			                	delta: 1
			                });
			                resolve(true);
			            },
			            fail: (err) => {
			                console.error('支付失败:', err);
			                if (err.errMsg.includes('cancel')) {
			                    uni.showToast({
			                        title: '已取消支付',
			                        icon: 'none',
			                        duration: 2000
			                    });
			                }
			                reject(err);
			            }
			        });
			    });
			},
			chooseAddress() {
				this.$refs.dzaddressPopup.open();
			},
			dizclosePopup() {
				this.$refs.dzaddressPopup.close();
			},
			setDefault(index) {
				for (let i = 0; i < this.addressList.length; i++) {
					this.addressList[i].gender = false;
				}
				this.addressList[index].gender = true;
			},
			// 保存地址
			async saveAddress() {
				// 校验表单
				if (!this.addressForm.recipient_name) {
					uni.showToast({
						title: '请输入收货人姓名',
						icon: 'none'
					});
					return;
				}

				if (!this.validatePhone()) {
					return;
				}

				if (!this.addressForm.province_id || !this.addressForm.regionText) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					});
					return;
				}

				if (!this.addressForm.street_address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return;
				}

				try {
					const addressData = {
						recipient_name: this.addressForm.recipient_name,
						phone_number: this.addressForm.phone_number,
						// gender: this.addressForm.gender,
						province_id: this.addressForm.province_id,
						city_id: this.addressForm.city_id,
						area_id: this.addressForm.area_id,
						// province_name: this.addressForm.province_name,
						// city_name: this.addressForm.city_name,
						// area_name: this.addressForm.area_name,
						street_address: this.addressForm.street_address,
						is_default: this.addressForm.is_default
					};

					if (this.editIndex >= 0) {
						// 编辑模式
						addressData.user_address_id = this.addressForm.user_address_id;
						await user_updateAddress(addressData);
					} else {
						// 新增模式
						await user_addAddress(addressData);
					}

					// 重新获取地址列表
					this.getUserAddressList();

					this.closePopup();
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
				} catch (error) {
					console.error('保存地址失败:', error);
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			},
			// 复制地址
			copyAddress(item) {
				const text =
					`${item.recipient_name} ${item.phone_number} ${item.province_name}${item.city_name}${item.area_name}${item.street_address}`;
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '已复制地址',
							icon: 'none'
						});
					}
				});
			},
			// 编辑地址
			editAddress(index) {
				this.showAddressForm(index);
			},
			// 显示地址表单
			showAddressForm(index = -1) {
				if (index >= 0) {
					// 编辑模式
					this.formTitle = '编辑收货地址';
					this.editIndex = index;
					const address = this.addressList[index];

					this.addressForm = {
						user_address_id: address.user_address_id,
						recipient_name: address.recipient_name,
						phone_number: address.phone_number,
						// gender: address.gender || '先生',
						province_id: address.province_id,
						city_id: address.city_id,
						area_id: address.district_id,
						province_name: address.province_name,
						city_name: address.city_name,
						area_name: address.area_name,
						street_address: address.street_address,
						is_default: address.is_default,
						region: [address.province_name, address.city_name, address.area_name],
						regionText: `${address.province_name} ${address.city_name} ${address.area_name}`
					};

					// 更新地区选择器位置
					this.updateRegionPicker(address);
				} else {
					// 新增模式
					this.formTitle = '新增收货地址';
					this.editIndex = -1;
					this.addressForm = {
						user_address_id: null,
						recipient_name: '',
						phone_number: '',
						// gender: '先生',
						province_id: null,
						city_id: null,
						area_id: null,
						province_name: '',
						city_name: '',
						area_name: '',
						street_address: '',
						is_default: 0,
						region: [],
						regionText: ''
					};
				}

				this.$refs.addressPopup.open();
			},

			// 关闭弹窗
			closePopup() {
				this.$refs.addressPopup.close();
			},
			// 删除地址
			async deleteAddress(index) {
				try {
					const address = this.addressList[index];
					if (this.addressList[index].user_address_id == this.xuanzong.user_address_id) {
						this.xuanzong = {};
					}
					const data = await user_deleteAddress({
						user_address_id: address.user_address_id
					});
					if (data.code == 200) {
						this.getUserAddressList();
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('删除地址失败:', error);
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			},
			// 更新地区选择器初始值
			async updateRegionPicker(address) {
				if (address) {
					// 获取省份索引
					const provinceIndex = this.provinces.findIndex(item => item.district_id === address.province_id);
					if (provinceIndex >= 0) {
						this.regionValue[0] = provinceIndex;

						// 获取城市列表
						await this.getCities(this.provinces[provinceIndex].district_id);

						// 获取城市索引
						const cityIndex = this.cities.findIndex(item => item.district_id === address.city_id);
						if (cityIndex >= 0) {
							this.regionValue[1] = cityIndex;

							// 获取区县列表
							await this.getAreas(this.cities[cityIndex].district_id);

							// 获取区县索引
							const areaIndex = this.areas.findIndex(item => item.district_id === address.district_id);
							if (areaIndex >= 0) {
								this.regionValue[2] = areaIndex;
							}
						}
					}
				}
			},
			// 获取城市列表
			async getCities(provinceId) {

				try {
					const res = await common_getAreaList({
						parent_id: provinceId
					});
					this.cities = res.content.data || [];
					this.regionValue[1] = 0;
					this.regionValue[2] = 0;
					if (this.cities.length > 0) {
						await this.getAreas(this.cities[0].district_id);
					} else {
						this.areas = [];
					}
				} catch (error) {
					console.error('获取城市列表失败:', error);
				}
			},
			// 获取区县列表
			async getAreas(cityId) {

				try {
					const res = await common_getAreaList({
						parent_id: cityId
					});
					this.areas = res.content.data || [];
					this.regionValue[2] = 0;
				} catch (error) {
					console.error('获取区县列表失败:', error);
				}
			},
			// 显示地区选择器
			showRegionPicker() {
				this.$refs.regionPopup.open();
			},
			// 取消地区选择
			cancelRegionSelect() {
				this.$refs.regionPopup.close();
			},
			// 确认地区选择
			// 确认地区选择
			confirmRegionSelect() {
				console.log(this.provinces)
				const province = this.provinces[this.regionValue[0]];
				const city = this.cities[this.regionValue[1]];
				const area = this.areas[this.regionValue[2]];

				if (!province || !city || !area) {
					uni.showToast({
						title: '请选择完整的地区',
						icon: 'none'
					});
					return;
				}

				this.selectedRegion = [province.district_name, city.district_name, area.district_name];
				this.addressForm.province_id = province.district_id;
				this.addressForm.city_id = city.district_id;
				this.addressForm.area_id = area.district_id;
				this.addressForm.province_name = province.district_name;
				this.addressForm.city_name = city.district_name;
				this.addressForm.area_name = area.district_name;
				this.addressForm.region = this.selectedRegion;
				this.addressForm.regionText = `${province.district_name} ${city.district_name} ${area.district_name}`;
				this.$refs.regionPopup.close();
			},
			// 地区选择器变化
			async handleRegionChange(e) {
				console.log(e)
				const value = e.detail.value;
				this.regionValue = value;

				// 如果省份变化，更新城市列表
				if (value[0] !== this.lastProvinceIndex) {
					const provinceId = this.provinces[value[0]].district_id;
					await this.getCities(provinceId);
					this.lastProvinceIndex = value[0];
				}

				// 如果城市变化，更新区县列表
				if (value[1] !== this.lastCityIndex) {
					const cityId = this.cities[value[1]].district_id;
					await this.getAreas(cityId);
					this.lastCityIndex = value[1];
				}
			},
			validatePhone() {
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!this.addressForm.phone_number) {
					this.phoneError = '请输入手机号码';
					return false;
				} else if (!phoneReg.test(this.addressForm.phone_number.replace(/\*/g, ''))) {
					this.phoneError = '请输入正确的手机号码';
					return false;
				}
				this.phoneError = '';
				return true;
			},
			// 性别选择
			handleGenderChange(e) {
				this.addressForm.gender = e.detail.value;
			},
		}
	}
</script>

<style lang="less" scoped>
	.payment-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 90px;
		/* 防止被底部栏遮挡 */
		padding-top: 10px;
	}

	/* 地址选择样式 */
	.address-section {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
	}

	.address-icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.address-text {
		flex: 1;
		color: #333;
	}

	.arrow-icon {
		width: 16px;
		height: 16px;
	}

	/* 商品清单样式 */
	.product-section {
		background: #fff;
		margin-bottom: 10px;
		padding: 15px;
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.product-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.product-image {
		width: 80px;
		height: 80px;
		margin-right: 10px;
		border-radius: 12px;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 14px;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 限制显示2行 */
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		/* 防止长单词或URL溢出 */
		margin-bottom: 20px;
	}


	.product-price {
		font-size: 16px;
		color: #ff4444;
		margin-top: 5px;
	}

	.product-quantity {
		color: #333;
	}

	.subtotal {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
		font-size: 16px;
	}

	.subtotal-price {
		font-weight: 550;
		margin-left: 10px;
	}

	/* 备注样式 */
	.remark-section {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
		width: 93%;
		margin-left: 12px;
	}

	.remark-section input {
		width: 100%;
		height: 40px;
		border: 1px solid #f5f5f5;
		border-radius: 4px;
		padding: 0 10px;
		margin-top: 10px;
	}

	/* 支付方式样式 */
	.payment-method {
		background: #fff;
		padding: 15px;
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
	}

	.method-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}

	.payment-icon {
		width: 25px;
		height: 25px;
		margin-right: 10px;
	}

	.method-name {
		flex: 1;
		color: #333;
	}

	.selected-icon,
	.unselected-icon {
		width: 20px;
		height: 20px;
	}

	/* 底部支付栏样式 */
	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 10px 15px;
		border-top: 1px solid #f0f0f0;
	}

	.total-amount {
		flex: 1;
		font-size: 18px;
		font-weight: 550;
	}

	.amount {
		margin-left: 5px;
		font-size: 18px;
	}

	.pay-button {
		background: #339966;
		color: #fff;
		border: none;
		border-radius: 20px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 16px;
		width: 55%;
	}

	/* 弹窗样式 */
	.popup-content {
		background-color: #fff;
		border-radius: 16px 16px 0 0;
		padding-bottom: 12px;
	}

	.popup-header {
		position: relative;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #f5f5f5;
	}

	.close-icon {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
	}

	.form-container {
		padding: 0 15px 15px;
		max-height: 70vh;
		overflow-y: auto;
	}

	.form-item {
		padding: 15px 0;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.form-label {
		font-size: 14px;
		color: #333;
		margin-bottom: 10px;
	}

	.form-input,
	.form-textarea {
		font-size: 15px;
		color: #333;
		width: 100%;
	}

	.form-input {
		height: 20px;
		line-height: 20px;
	}

	.form-textarea {
		height: 60px;
		line-height: 1.5;
	}

	.radio-group {
		display: flex;
	}

	.radio-label {
		display: flex;
		align-items: center;
		font-size: 14px;
		margin-right: 20px;
	}

	.error-tip {
		font-size: 12px;
		color: #f56c6c;
		margin-top: 5px;
	}

	.arrow-icon {
		position: absolute;
		right: 0;
		top: 40px;
		width: 16px;
		height: 16px;
	}

	.save-btn {
		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: #339966;
		color: #ffffff;
		font-size: 16px;
		border-radius: 22px;
	}

	/* 地区选择器样式 */
	.region-picker {
		background-color: #fff;
		border-radius: 16px 16px 0 0;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		padding: 0 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.picker-title {
		font-size: 16px;
		font-weight: bold;
	}

	.picker-view {
		height: 300px;
	}

	.picker-view view {
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
	}

	.address-list {
		padding: 0 12px;
	}

	.address-card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 15px;
		margin-bottom: 15px;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
		margin-right: 15px;
	}

	.phone {
		font-size: 14px;
		color: #666;
	}

	.default-tag {
		margin-left: 10px;
		font-size: 12px;
		color: #339966;
		border: 1px solid #339966;
		border-radius: 3px;
		padding: 0 5px;
		height: 18px;
		line-height: 18px;
	}

	.address-detail {
		font-size: 14px;
		color: #333;
		line-height: 1.5;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.action-btn {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #666;
	}

	.action-btn.active {
		color: #339966;
	}

	.action-icon {
		width: 16px;
		height: 16px;
		margin-right: 5px;
	}

	.action-group {
		display: flex;
	}

	.action-group .action-btn {
		margin-left: 15px;
	}

	.add-btn {

		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: #339966;
		color: #ffffff;
		font-size: 16px;
		border-radius: 22px;
		box-shadow: 0 2px 10px rgba(51, 153, 102, 0.3);
	}
</style>